<template>
  <v-chart
    ref="overallChartRef"
    class="chart"
    :option="option"
    @legendselectchanged="legendselectchanged" />
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  GridComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  name: 'overallChart',
  components: {
    VChart
  },
  props: {
    xData: { // x 轴
      type: Array,
      default: () =>[]
    },
    yData: { // y 轴
      type: Array,
      default: () =>[]
    },
    legendData: { // 图例
      type: Array,
      default: () =>[]
    },
    seriesData: { // 数据
      type: Array,
      default: () =>[]
    },
    choosen: { // 选中集合
      type: Array,
      default: () => {}
    },
  },
  data() {
    return {
      option: {
        color: [ '#FF6A00', '#FFD74D', '#90E5B4', '#016BFF', '#A567C3' ],
        title: {
          show: false
        },
        grid: {
          top: 40,
          left: 30,
          right: 30,
          bottom: 30
        },
        tooltip: {
          z: 0,
          trigger: "axis",
          borderWidth: 0,
          backgroundColor: 'rgba(0,0,0,0.7)',
          textStyle: {
            color: '#FFFFFF'
          },
          axisPointer: {
            lineStyle: {
              type: 'solid',
              width: 2,
              color: '#000000'
            }
          }
        },
        legend: {
          left: "left",
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',
          textStyle: { color: '#000000' },
          borderWidth: 0,
          data: this.legendData
        },
        xAxis: {
          z: 9,
          type: 'category',
          splitNumber: 6,
          axisLine: {
            lineStyle: {
              color: '#D8D8D8'
            }
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#D8D8D8'
            }
          },
          axisLabel: {
            color: '#000000'
          },
          splitLine: {
            lineStyle: {
              color: '#E6E6E6'
            }
          },
          data: this.xData
        },
        yAxis: {
          show: false,
          type: 'value',
          axisLabel: {
            color: '#000000'
          },
        },
        series: [
          {
            name: this.legendData[0],
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            lineStyle: {
              width: 2
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#FFFFFF',
            },
            emphasis: {
              scale: false,
              lineStyle: {
                width: 2
              },
            },
            zlevel: 2,
            z: 2,
            data: this.seriesData[0]
          },
          {
            name: this.legendData[1],
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            lineStyle: {
              width: 2
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#FFFFFF',
            },
            emphasis: {
              scale: false,
              lineStyle: {
                width: 2
              },
            },
            zlevel: 2,
            z: 2,
            data: this.seriesData[1]
          },
          {
            name: this.legendData[2],
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            lineStyle: {
              width: 2
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#FFFFFF',
            },
            emphasis: {
              scale: false,
              lineStyle: {
                width: 2
              },
            },
            zlevel: 2,
            z: 2,
            data: this.seriesData[2]
          },
          {
            name: this.legendData[3],
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            lineStyle: {
              width: 2
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#FFFFFF',
            },
            emphasis: {
              scale: false,
              lineStyle: {
                width: 2
              },
            },
            zlevel: 2,
            z: 2,
            data: this.seriesData[3]
          },
          {
            name: this.legendData[4],
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            lineStyle: {
              width: 2
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#FFFFFF',
            },
            emphasis: {
              scale: false,
              lineStyle: {
                width: 2
              },
            },
            zlevel: 2,
            z: 2,
            data: this.seriesData[4]
          },
        ]
      }
    };
  },
  watch: {
    xData: {
      handler(val, oldVal){
        this.$refs.overallChartRef.setOption({
          xAxis: {
            data: val
          }
        })
      },
      deep:true //true 深度监听
    },
    seriesData: {
      handler(val, oldVal){
        this.$refs.overallChartRef.setOption({
          series: [
            { data: val[0] },
            { data: val[1] },
            { data: val[2] },
            { data: val[3] },
            { data: val[4] }
          ]
        })
        this.$refs.overallChartRef.resize()
        // this.option.series[0].data = val[0]
        // this.option.series[1].data = val[1]
        // this.option.series[2].data = val[2]
        // this.option.series[3].data = val[3]
        // this.option.series[4].data = val[4]
      },
      deep:true //true 深度监听
    }
  },
  created() {},
  mounted() {
    let _this = this
    this.$nextTick(() => {
      window.addEventListener("resize", function() {                
        _this.$refs.overallChartRef.resize()
      });
      this.defaultLegend()
    });
  },
  methods: {
    // 图例切换
    legendselectchanged(args) {
      let data = args.selected
      let res = []
      if(data['支付金额（元）']) {
        res.push(1)
      }
      if(data['支付订单数']) {
        res.push(2)
      }
      if(data['支付人数']) {
        res.push(3)
      }
      if(data['客单价（元）']) {
        res.push(4)
      }
      if(data['成功退款金额（元）']) {
        res.push(5)
      }
      this.$emit('submit', res)
    },
    // 关联图例切换
    changeLegend(name, boolean) {
      if(name == 'all'){
        this.$refs.overallChartRef.dispatchAction({
          type: 'legendAllSelect'
        })
      } else {
        if(boolean) {
          this.$refs.overallChartRef.dispatchAction({
            type: 'legendSelect',
            name: name
          })
        } else {
          this.$refs.overallChartRef.dispatchAction({
            type: 'legendUnSelect',
            name: name
          })
        }
      }
    },
    // 默认图例
    defaultLegend() {
      this.$refs.overallChartRef.dispatchAction({
        type: 'legendSelect',
        name: '支付金额（元）'
      })
      this.$refs.overallChartRef.dispatchAction({
        type: 'legendUnSelect',
        name: '支付订单数'
      })
      this.$refs.overallChartRef.dispatchAction({
        type: 'legendUnSelect',
        name: '支付人数'
      })
      this.$refs.overallChartRef.dispatchAction({
        type: 'legendUnSelect',
        name: '客单价（元）'
      })
      this.$refs.overallChartRef.dispatchAction({
        type: 'legendUnSelect',
        name: '成功退款金额（元）'
      })
    },
  }
};
</script>

<style lang="less"></style>
